<template>
  <div class="edit-div">
    <div class="table-bar">
      <p class="page-title">考试管理 > 考试详情</p>
      <div class="object-con-info common-border">
        <div class="flex-row-start">
          <div class="object-con-avatar">
            <span>{{data.exam_name}}</span>
          </div>
          <div class="flex-column-between">
            <p class="experiment-name">{{data.exam_name}}</p>
            <p class="experiment-duration flex-row-around">
              <span class="price">￥{{data.price/100}} </span>
              <span>创建时间：{{data.create_time}}</span>
              <span>开考时间：{{data.start_time || '不定时'}}</span>
              <span>考试时长：{{data.duration}} 分钟</span>
            </p>
          </div>
        </div>
        <div class="flex-row-wrap experiment-infos">
          <span>购买数量：{{data.student_count}}</span>
          <span>提交数量：{{data.paper_count}}</span>
          <span>评阅数量：{{data.paper_count}}</span>
        </div>
        <div class="flex-column-start ind-line">
          <p>
            <el-button @click="onDown" v-if="data.status == 'N'" type="warning">下架</el-button>
            <el-button @click="onUp" v-else type="warning">上架</el-button>
          </p>
        </div>
      </div>
      <div class="tabs">
        <div @click="setTab('first')" :class="activeTab == 'first' ? 'active-tab' : ''">  
          考试介绍
        </div>
        <div @click="setTab('second')" :class="activeTab == 'second' ? 'active-tab' : ''">
          考试题目
        </div>
        <div @click="setTab('third')" :class="activeTab == 'third' ? 'active-tab' : ''">用户信息</div>
      </div>
      <div v-if="activeTab == 'first'">
        <div v-html="data.exam_describe"></div>
      </div>
      <div v-if="activeTab == 'second'">
        <exam-ques @getItem="getItem" v-if="data.start_time" :data="data" />
        <div v-else>
          <div class="common-border question_info">
            <div>单选题量 <span>{{data.mc_total}}</span></div>
            <div>分值 <span>{{data.mc_score}}</span></div>
          </div>
          <div class="common-border question_info">
            <div>多选题量 <span>{{data.ma_total}}</span></div>
            <div>分值 <span>{{data.ma_score}}</span></div>
          </div>
          <div class="common-border question_info">
            <div>判断题量 <span>{{data.tf_total}}</span></div>
            <div>分值 <span>{{data.tf_score}}</span></div>
          </div>
          <div class="common-border question_info">
            <div>填空题量<span>{{data.bl_total}}</span></div>
            <div>分值 <span>{{data.bl_score}}</span></div>
          </div>
          <div class="common-border question_info">
            <div>简答题量 <span>{{data.sa_total}}</span></div>
            <div>分值 <span>{{data.sa_score}}</span></div>
          </div>
        </div>
      </div>
      <div v-if="activeTab == 'third'">
        <papers :exam_id="data.id" />
      </div>
    </div>
  </div>
</template>
<script>
import { examModel } from "@/api/models";
import { Message } from "element-ui";
import ExamQues from '@/components/ExamQues'
import {WConfirm} from '@/utils/utils.js'
import tabMixin from '@/mixins/tabMixin.js'
import Papers from '@/components/Papers';
export default {
  mixins: [tabMixin],
  components: {ExamQues, Papers},
  data() {
    return {
      data: {
        ma: [],
        mc: [],
        tf: [],
        bl: [],
        sa: []
      },
      id: null,
      ma_total_score: 0,
      tf_total_score: 0,
      mc_total_score: 0,
      bl_total_score: 0,
      sa_total_score: 0,
      activeType: 'ma',
      activeRow: {},
      show: false,
    };
  },
  mounted() {
    this.id = this.$route.params.id
    this.getItem()
  },
  methods: {
    getItem() {
      examModel.item(this.id, (res) => {
        this.data = res.data;
        if(this.data.ma.length > 0) this.ma_total_score += this.data.ma.length * this.data.ma[0].value;
        if(this.data.mc.length > 0) this.mc_total_score += this.data.mc.length * this.data.mc[0].value;
        if(this.data.tf.length > 0) this.tf_total_score += this.data.tf.length * this.data.tf[0].value;
        if(this.data.bl.length > 0) this.bl_total_score += this.data.bl.length * this.data.bl[0].value;
        if(this.data.sa.length > 0) this.sa_total_score += this.data.sa.length * this.data.sa[0].value;
      });
    },
    onSubmit(id) {
      examModel.addQues({
        examquestion_id: this.activeRow.id,
        question_id: id
      }, res => {
        Message.success(res.message)
        this.onClose()
        this.getItem()
      }, err => {
        console.log(err)
        Message.warning(err)
      })
    },
    onClose() {
      this.show = false;
    },
    goBack() {
      this.$router.go(-1)
    },
    onAdd(row, type) {
      this.activeType = type;
      this.activeRow = row;
      this.show = true
    },
    onDel(row) {
      examModel.remQues({
        examquestion_id: row.id
      }, res => {
        Message.success(res.message)
        this.getItem()
      }, err => {
        console.log(err)
        Message.warning(err)
      })
    },
    onUp(row) {
      WConfirm('确定上架考试' + row.exam_name, () => {
        this.onStatusAction(row.id, 'N')
      })
    },
    onDown(row) {
      WConfirm('确定下架考试' + row.exam_name, () => {
        this.onStatusAction(row.id, 'C')
      })
    },
    onStatusAction(id, status) {
      examModel.acttion({
        id: id,
        status: status
      }, res => {
        Message.success(res.message)
        this.getList()
      }, err => {
        Message.error(err.message)
      })
    }
  },
};
</script>
<style lang="scss">
.form{
  text-align: left;
}
.form h2{
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 15px;
}
.form2 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 80%;
  flex-wrap: wrap;
}
.form2 .form-half-input {
  width: 50%;
}
.obj{
  width: 90%;
}
.obj-title, .obj-no-ques{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.obj-score>span{
  margin-right: 15px
}
.obj-score-value{
  border: 1px solid #cccccc;
  padding: 5px 15px;
}
.obj-options{
  width: 80%;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.obj-options > span{
  width: 50%;
}
.object-con-info {
    display: block;
  }
  .experiment-infos > span {
    display: inline-block;
    margin-right: 50px;
    margin-top: 20px;
  }
  .object-con-avatar {
    width: 180px;
    height: 100px;
    background-color: rgba(242, 242, 242, 1);
    color: #333;
  }
  .experiment-duration {
    height: 90px;
    margin-left: 20px;
  }
  .experiment-duration > span{
    margin-left: 50px;
  }
  .experiment-duration > span:first-child{
    margin-left: 10px;
  }
  .experiment-name {
    margin-left: 20px;
  }
  .question_info{
    padding: 35px 25px;
    margin-top: 20px;
  }
  .question_info > div{
    display: inline-block;
    margin-left: 30px;
  }
  .question_info > div > span{
    margin-left: 15px;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 5px;
    padding: 10px 25px;
  }
</style>